<template>
    <div id="wrap">
        <Header></Header>
        <HeaderNav :headerlist="headerlist"></HeaderNav>
        <div class="main">
            <div class="container">
                <NavLeft :MainList="mainList"/>
                <Swiper />
            </div>
        </div>
        <News />
        <Hot />
        <HotBrand />
        <HomeSection :goodsList="GoodsList"></HomeSection>
        <Special />
    </div>
</template>

<script>
import Header from '@/page/Main/Header'
import HeaderNav from '@/page/Main/HeaderNav'
import Swiper from '@/page/Main/swiper'
import NavLeft from '@/page/Main/NavLeft'
import News from '@/page/Main/news'
import Hot from '@/page/Main/Hot'
import HotBrand from '@/page/Main/HotBrand'
import HomeSection from '@/page/Main/HomeSection'
import Special from '@/page/Main/special'

export default {
    components: {
        Header,
        HeaderNav,
        NavLeft,
        Swiper,
        News,
        Hot,
        HotBrand,
        HomeSection,
        Special,
    },
    data() {
        return {
            GoodsList: [],
            headerlist: [],
            mainList:[],
        }
    },
    mounted() {
        // getHeaderList()  // 头部导航
        // getGoodsList()  // goods商品列表
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/home/category/head').then(res => {
            if (res.data.msg == '操作成功') {
                this.headerlist = res.data.result  // 头部导航
                this.mainList = res.data.result  // 选项卡
            }
        })
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/home/goods').then((res) => {
            if (res.data.msg == '操作成功') {
                this.GoodsList = res.data.result
            }
        })
        
    },
    methods: {

    },
    computed: {

    }
}
</script>
<style lang="scss">
#wrap {
    background: #f5f5f5;



    .main {
        width: 100%;
        height: 500px;

        .container {
            position: relative;


        }
    }
}
</style>